// 扩展vue原有的功能：全局组件，自定义指令，挂载原型方法，注意点：Vue3没有全局过滤器。
import { useIntersectionObserver } from '@vueuse/core'
import Confirm from './Confirm'
import defaultImg from '@/assets/images/200.png'
import Message from './Message'
// Vue2 全局注册组件
// Vue.component('组件名', 组件)

// Vue3 全局注册组件
// app.component('组件名', 组件)

// 自定义指令
const defineDirective = (app) => {
  app.directive('lazy', {
    // 标签加载完毕后执行
    mounted(el, { value }) {
      // stop 停止观察函数
      const { stop } = useIntersectionObserver(
        el,
        ([{ isIntersecting }]) => {
          // 判断是否进入观察区
          if (isIntersecting) {
            // 进入了就将图片的值给当前元素
            el.src = value
            // 图片地址是错误的话就是用默认的
            el.onerror = () => {
              el.src = defaultImg
            }
            // 停止观察
            stop()
          }
        },
        { threshold: [0] },
      )
    },
  })
}

const components = require.context('./', false, /\.vue$/, 'sync')

export default {
  // install 这种写法以后是提供给 app.use() 安装组件库用的
  install(app) {
    // Vue3 全局注册组件
    defineDirective(app)

    components.keys().forEach((path) => {
      // key 组件实例
      const key = components(path).default
      app.component(key.name, key)
    })

    // app.config.globalProperties.$message = Message
    app.config.globalProperties.$message = Message // 原型函数
    app.config.globalProperties.$confirm = Confirm
  },
}
